<template>
    <div>
        <ButtonGroup >
           

             <Button type="info"  @click="changtype(1)">汽车</Button>
             <Button type="success"  @click="changtype(2)">电脑</Button>
             <Button type="warning"  @click="changtype(3)">手机</Button>
            <Button type="error"  @click="changtype(4)">手表</Button>
        </ButtonGroup>

        
            <Button  type="error"  @click="removes" style="margin-left:100px">删除多个</Button>
            <Button type="warning"  @click="addrost(type)">添加根节点</Button>
        
         
         <Tree :data="data1" show-checkbox :render="renderContent"  on-check-change="onSelection"></Tree>
         
        <Modal v-model="operateModal"  title="数据处理">
            <Form ref="formValidate" :model="formValidate"  :label-width="80">
                <FormItem label="parentId" prop="parentId">
                    <Input v-model="formValidate.parentId"></Input>
                </FormItem>
            <FormItem label="_id" prop="_id">
                    <Input v-model="formValidate._id"></Input>
                </FormItem>  
                 <FormItem label="type" prop="type"> 
                    <Input v-model="formValidate.type" ></Input>
                </FormItem>
                <FormItem label="文件名" prop="title">
                    <Input v-model="formValidate.title" placeholder="Enter your title"></Input>
                </FormItem>
               
            
                <FormItem>
                    <Button type="primary"  @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" >清空</Button>
                </FormItem>
            </Form>

            <div slot="footer">
                数据操作！
            </div>

    </Modal>

    </div>
</template>
<script>
    export default {
        data () {
            return {

                 formValidate: {
                     "parentId": "",
                    " _id":"",
                    "title": "",
                    "type": "",
                  },
                 operateModal:false,
                data1: [],
                type:1,
                ids:[],
               id:0
             }
        },
        methods:{
                getListData(type){
                        
                            this.axios({
                                url:`http://localhost:3000/cate/list/${this.type}`,
                                method:'get',
                                }).then(res=>{
                                // console.log(res)
                                    this.data1=res.data;
                                // console.log(this.data)
                            })
                },
                //切换
                changtype(type){
                        
                        this.axios({
                                url:`http://localhost:3000/cate/list/${type}`,
                                method:'get',
                                }).then(res=>{
                                
                                this.data1=res.data;
                                this.type=type;
                                return this.type
                              })
                },

            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '90%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                         h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.append(data)

                                        }
                                    }
                                }, '添加'),
                                  h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(data)

                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(data)
                                        }
                                    }
                                }, '删除')
                            
                    ])
                ]);
            },
            //添加
            append (data) {
                 this.formValidate.parentId=data._id;
                this.formValidate.type=data.type;
                this.operateModal = true;
                this.id=0
             },
              //添加根节点
            addrost(type){
                 this.formValidate.parentId=null;
                 this.formValidate.type=this.type;
                 this.operateModal = true;
                 this.id=0
            },
             //修改
            editData(data){
               // console.log(data)
                 this.formValidate.title=data.title;
                 this.formValidate.parentId=data.parentId;
                 this.id=data._id;
                 this.formValidate.type=data.type;
                this.operateModal = true;
            },
            //删除
            remove (params) {
               // console.log(params)
                    this.$Modal.confirm({
                    title: '确认删除数据?',
                    content: '<p>你确认删除该数据吗?</p>',
                    onOk: () => {
                    
                        this.axios({
                            url:`http://localhost:3000/cate/data/${params._id}`,
                            method:"delete",
                            data:{
                                ids:this.ids.toString()
                            }
                        }).then(res=>{
                            console.log(11)
                            this.$Message.info('删除数据成功');
                            this.getListData();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            },
            //复选事件
             onSelection(selection){
                // console.log(selection)
                    var ids = [];
                    for(let i=0;i<selection.length;i++){
                        ids.push(selection[i]._id)
                    }
                    this.ids = ids
            },
           
            //删除多个
             removes(params){
                   
                this.$Modal.confirm({
                    title: '确认删除数据?',
                    content: '<p>你确认删除该数据吗?</p>',
                    onOk: () => {
                     console.log(this.ids.toString())
                        this.axios({
                            url:`http://localhost:3000/cate/data/removers`,
                            method:"delete",
                            data:{
                                ids:this.ids.toString()
                            }
                        }).then(res=>{
                            this.$Message.info('删除数据成功');
                            this.getListData();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            }, 

 
//   this.$Modal.confirm({
//                 title: '确认删除',
//                 content: '<p>你确认删除该数据吗？</p>',
//                 onOk: () => {
                  
//                   this.axios({
//                         url:`http://localhost:3000/${this.module}/removes`,
//                          method:'post',
//                         data:{
//                             ids:this.ids.toString(),
                           
//                         }
                        
//                         }).then(res=>{
//                          this.$Message.info('删除数据成功')
//                          this.getpage(); 
//                        })

//                 },
//                 onCancel: () => {
//                     this.$Message.info('取消删除');
//                 }
//             });


 


             handleSubmit (name) {
                 
                  this.$refs[name].validate((valid) => {
                
                    if(this.id!=0){
                       // console.log(this.id)
                        // 修改操作
                        this.axios({
                            
                                url:`http://localhost:3000/cate/data/${this.id}`,
                                method:'put',
                                data:this.formValidate
                            }).then(res=>{
                        // console.log(11)
                                this.$Message.success('数据操作成功！');
                                this.operateModal = false;
                                this.getListData();
                                
                                Object.assign(this.$data, this.$options.data())//重置data数据
                            
                                this.id=0
                            })
                            
                }else{
                  
                       // 添加操作
                        if (valid) {
                            this.axios({
                                url:`http://localhost:3000/cate/data`,
                                method:'post',
                                data:this.formValidate
                                
                            }).then(res=>{
                                this.$Message.success('数据操作成功！');
                                this.operateModal = false;
                                this.getListData()
                                Object.assign(this.$data, this.$options.data())
                               this.id=0
                            })
                        } else {
                            
                            this.$Message.error('Fail!');
                        }
                        
                    }   
                })
            
            },
              handleReset (name) {
                 this.$refs[name].resetFields();
             },
    
        },
       
        mounted(){
            this.getListData();
        }
    }
</script>